<script setup>
import {ref, onMounted } from 'vue';

const dialogVisible = ref(true);
const chatMessages = ref([
        { text: '这是一条问题', isQuestion: true },
        { text: '这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒\这是一这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒 这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒 这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒\n这是一条回答荆防颗粒撒江东父老看手机代发拉卡萨电极法立卡就撒', isQuestion: false },
      ])
</script>

<template>
    
        <el-scrollbar style="height: 100%; width: 100%;">
            <div class="chat-container">
                <!-- 问答内容将放在这里 -->
                <div v-for="(item, index) in chatMessages" :key="index"
                    :class="{ 'is-question': item.isQuestion, 'is-answer': !item.isQuestion }">
                    {{ item.text }}
                </div>
            </div>
        </el-scrollbar>
</template>

<style scoped>
/* 添加样式以区分问题和回答 */
.is-question {
  /* 问题样式 */
}

.is-answer {
  /* 回答样式 */
  max-width: 50%;
  background-color: #4e4f50;
}
</style>
